<template>
  <div class="register-page">
    <div class="register-container">
      <div class="register-left">
        <h1 class="title">innoClub</h1>
        <p class="slogan">
          打造你的技术成长之路 —— 从这里开始你的编程进阶之旅
        </p>
        <ul class="feature-list">
          <li class="feature-item">
            <div class="feature-icon">
              <a-icon type="code" style="color: #fff; font-size: 16px;" />
            </div>
            <div class="feature-text">
              海量优质编程题库，循序渐进提升技术实力
            </div>
          </li>
          <li class="feature-item">
            <div class="feature-icon">
              <a-icon type="robot" style="color: #fff; font-size: 16px;" />
            </div>
            <div class="feature-text">
              AI智能助手，为你解答技术难题，指导学习方向
            </div>
          </li>
          <li class="feature-item">
            <div class="feature-icon">
              <a-icon type="team" style="color: #fff; font-size: 16px;" />
            </div>
            <div class="feature-text">
              活跃的技术社区，分享经验，共同成长
            </div>
          </li>
          <li class="feature-item">
            <div class="feature-icon">
              <a-icon type="solution" style="color: #fff; font-size: 16px;" />
            </div>
            <div class="feature-text">
              模拟面试系统，助你轻松应对技术面试
            </div>
          </li>
        </ul>
      </div>
      <div class="register-right">
        <div class="register-form">
          <h2>注册新账号</h2>
          <a-form :form="form" @submit="handleSubmit">
            <a-form-item>
              <a-input
                v-decorator="[
                  'username',
                  { rules: [{ required: true, message: '请输入用户名!' }] }
                ]"
                size="large"
                placeholder="用户名"
              >
                <a-icon slot="prefix" type="user" />
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-input
                v-decorator="[
                  'mobile',
                  { 
                    rules: [
                      { required: true, message: '请输入手机号!' },
                      { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号!' }
                    ] 
                  }
                ]"
                size="large"
                placeholder="手机号"
              >
                <a-icon slot="prefix" type="mobile" />
              </a-input>
            </a-form-item>
            <a-form-item>
              <div class="verify-code">
                <a-input
                  v-decorator="[
                    'code',
                    { rules: [{ required: true, message: '请输入验证码!' }] }
                  ]"
                  size="large"
                  placeholder="验证码"
                >
                  <a-icon slot="prefix" type="safety" />
                </a-input>
                <a-button 
                  :disabled="!!countdown" 
                  @click="sendCode"
                  size="large"
                  :loading="sendingCode"
                >
                  {{ countdown ? `${countdown}s后重试` : '获取验证码' }}
                </a-button>
              </div>
            </a-form-item>
            <a-form-item>
              <a-input-password
                v-decorator="[
                  'password',
                  { rules: [{ required: true, message: '请输入密码!' }] }
                ]"
                size="large"
                placeholder="设置密码"
              >
                <a-icon slot="prefix" type="lock" />
              </a-input-password>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" html-type="submit" size="large" block :loading="registering">
                注册
              </a-button>
            </a-form-item>
            <div class="login-link">
              已有账号？<router-link to="/login">立即登录</router-link>
            </div>
          </a-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { auth } from '@/api/auth'

export default {
  name: 'Register',
  data() {
    return {
      countdown: 0,
      sendingCode: false,
      registering: false
    }
  },
  beforeCreate() {
    this.form = this.$form.createForm(this)
  },
  methods: {
    async sendCode() {
      try {
        const values = await this.form.validateFields(['mobile'])
        this.sendingCode = true
        
        try {
          await auth.sendSms({
            mobile: values.mobile
          })
          this.$message.success('验证码已发送')
          this.startCountdown()
        } catch (error) {
          if (error.response?.data?.message) {
            this.$message.error(error.response.data.message)
          }
        } finally {
          this.sendingCode = false
        }
      } catch (err) {
        // 这里只处理表单验证的错误，不需要显示错误信息
        // 因为ant design form会自动显示验证错误
      }
    },
    startCountdown() {
      this.countdown = 60
      const timer = setInterval(() => {
        this.countdown--
        if (this.countdown === 0) {
          clearInterval(timer)
        }
      }, 1000)
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields(async (err, values) => {
        if (!err) {
          this.registering = true
          try {
            await auth.register(values)
            this.$message.success('注册成功')
            this.$router.push('/login')
          } catch (error) {
            this.$message.error(error.response?.data?.message || '注册失败')
          } finally {
            this.registering = false
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.register-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f2f5;
  padding: 20px;
}

.register-container {
  width: 1000px;
  max-width: 100%;
  height: auto;
  min-height: 600px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: row;
  overflow: hidden;

  @media (max-width: 768px) {
    flex-direction: column;
    height: auto;
    min-height: auto;
  }
}

.register-left {
  flex: 1;
  background: linear-gradient(140deg, #2563eb 0%, #3b82f6 45%, #60a5fa 100%);
  padding: 48px;
  color: white;
  border-radius: 8px 0 0 8px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;

  @media (max-width: 768px) {
    padding: 24px;
    border-radius: 8px 8px 0 0;
    
    .feature-list {
      display: none; // 在移动端隐藏特性列表
    }
  }

  .title {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 16px;
    position: relative;
    z-index: 1;

    @media (max-width: 768px) {
      font-size: 28px;
      text-align: center;
    }
  }

  .slogan {
    font-size: 16px;
    margin-bottom: 48px;
    line-height: 1.6;
    position: relative;
    z-index: 1;

    @media (max-width: 768px) {
      font-size: 14px;
      margin-bottom: 24px;
      text-align: center;
    }
  }
}

.register-right {
  width: 400px;
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;

  @media (max-width: 768px) {
    width: 100%;
    padding: 24px;
  }
}

.register-form {
  width: 100%;

  h2 {
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 32px;
    text-align: center;
    color: #1f2937;

    @media (max-width: 768px) {
      font-size: 20px;
      margin-bottom: 24px;
    }
  }

  .verify-code {
    display: flex;
    gap: 12px;

    .ant-input-affix-wrapper {
      flex: 1;
    }

    .ant-btn {
      min-width: 120px;

      @media (max-width: 768px) {
        min-width: 100px;
      }
    }
  }

  .login-link {
    text-align: center;
    margin-top: 16px;

    a {
      color: #1890ff;
      margin-left: 8px;
    }
  }
}

.feature-list {
  margin-top: auto;
  position: relative;
  z-index: 1;

  .feature-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 24px;

    &:last-child {
      margin-bottom: 0;
    }

    .feature-icon {
      width: 32px;
      height: 32px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16px;
      flex-shrink: 0;
    }

    .feature-text {
      font-size: 14px;
      line-height: 1.6;
      opacity: 0.9;
    }
  }
}

// 添加动画效果
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style> 